<template>
	<view class="container">  
		<view class="快手-row">  
			<uni-icons type="search" size="30" v-model="searchKeyword" @tap="handleSearch"></uni-icons>
			<uni-icons type="personadd" size="30" @tap="goToAddFriends"></uni-icons> 
		</view>
	
		<view class="page">
			<view class="content-wrapper">  
				<view class="left-content">  
					<view class="content-item" v-for="(item, index) in filteredContent" :key="index">
						<view class="" v-for="(comment, commentIndex) in content.comments" :key="commentIndex + 'a'">
							<text>{{comment}}</text>
						</view>
						<view class="up">
							<image :src="item.avatar" alt="Avatar" class="avatar"></image>
							<p>{{item.nickName}}</p>
						</view>	
						<text class="content-title">{{ item.title }}</text>	
						<image :src="item.imageUrl" mode="aspectFill" class="image"></image>
						<!-- <text>{{item.comments}}</text> -->
						<template v-if="item.comments && item.comments.length > 0">
							<view class="comment-item"  v-for="(comment, commentIndex) in item.comments" :key="comment.id">
								<text class="comment-nickname">{{ comment.nickName }}:</text> 
								<text class="comment-content">{{ comment.commentContent }}</text>	
							</view>
						</template>
						<view style="display: flex;">
							<uni-easyinput placeholder="说点什么吧..." class="input" v-model="item.newComment"
							suffixIcon="paperplane" iconClick="sendComment"></uni-easyinput>
						</view>
						
						<view class="link-top"></view>		
					</view>
				</view>
			</view>  
		</view>
		<uni-icons type="plus" class="fixed-icon" size="50" @tap="goToAddPage"></uni-icons> 
	</view>
</template>

<script>  
import { hasLogin, logout, getUserid } from '@/store/index.js'
export default {
	data() {  
		return { 
			user: {
				userId: '',
				nickName: '',
				avatar: ''
			},
			leftContentList: [],
			searchKeyword: '',
			filteredContent: [],
			content: {
				comments: ''
			}
		};  
	},
	async onLoad() {
		if (hasLogin()) {
			let userInfoStr = uni.getStorageSync("userInfo");
			if (userInfoStr) {
				let userInfo = JSON.parse(userInfoStr);				
				this.user.userId = userInfo.userId || '';
				this.user.nickName = userInfo.nickName || '';
				this.user.avatar = userInfo.avatar || '';
			}
		}
		await this.getDataFromBackend();
	},
	methods: {
		sendComment(){
				uni.request({
					url:'',
					method:'POST',
					data:{
						
					},
					success: (res) => {
						console.log(res)
					},
					fail: () => {
						
					}
				})
		},
		async getDataFromBackend() {
			try {
				const res = await uni.request({
					url: 'http://localhost:8090/api/contents/all',
					method: 'GET',
				});
				const data = res.data.data;
				this.leftContentList = data;
				this.filteredContent = data;
				console.log("Filtered",this.filteredContent)
				for (const content of this.leftContentList) {
					this.content.comments = await this.getCommentsForContent(content.contentId);
					console.log('评论')
					console.log(this.content.comments);
				}
			} catch (error) {
				console.error('Error fetching data:', error);
			}
		},
		async getCommentsForContent(contentId) {
			try {
				const res = await uni.request({
					url: `http://localhost:8090/api/comments/content/${contentId}`,
					method: 'GET',
				});
				// console.log(res)
				const comments = res.data.data;
				const content = this.leftContentList.find(item => item.contentId === contentId);
				if (content) {
					content.comments = comments;
				}
				return content.comments
			} catch (error) {
				console.error('Error fetching comments for content:', error);
			}
		},
		handleSearch() {
			const keyword = this.searchKeyword.trim().toLowerCase();
			if (!keyword) {
				this.filteredContent = this.leftContentList;
				return;
			}
			this.filteredContent = this.leftContentList.filter(item => {
				return (
					item.title.toLowerCase().includes(keyword) ||
					item.nickname.toLowerCase().includes(keyword)
				);
			});
		},
		publishVideo() {  
			console.log('发布视频');  
		},
		goToAddFriends() {
			uni.navigateTo({
				url: '/pages/version1/search_friend'
			})
		},
		goToAddPage() {
			uni.navigateTo({
				url: '/pages/version1/edit_new_v1'
			})
		}	
	}
};  
</script>

<style scoped>
.fixed-icon {  
    position: fixed;
    bottom: 80px; /* 你可以根据需要调整这个值 */  
    right: 20px; /* 你可以根据需要调整这个值 */  
    z-index: 999; /* 确保图标在其他内容之上 */  
}	
.link-top {
	width: 100%;
	height: 1px;
	border-top: solid #ACC0D8 2px;
	margin-top: 20rpx;
}
	
.input{
	width: 72%;
	margin-top: 10rpx;
}	

.comment-item {
  display: flex;
  align-items: center; /* 垂直居中对齐评论项 */
  justify-content: space-between; /* 评论项内部内容左右对齐 */
  margin-bottom: 6rpx; /* 设置评论项之间的底部间距 */
}

.comment-nickname, .comment-content {
  align-items: center; /* 垂直居中对齐评论昵称和内容 */
}

.comment-nickname {
  font-weight: bold; /* 设置评论昵称的粗体 */
  color: #333; /* 设置评论昵称的颜色 */
}

.comment-content {
  color: #666; /* 设置评论内容的颜色 */
}

.up {
  display: flex;
  align-items: center; /* 垂直居中对齐评论项上部内容 */
}

.up p {
  margin-top: 58rpx; /* 重置段落的上外边距 */
  margin-left: 10px; /*设置段落的左外边距*/
}

.item-container {  
  display: flex; /* 启用Flexbox布局  */
  /* align-items: center; */
  /* 垂直居中对齐子元素 */  
  justify-content: flex-start; /* 水平方向上子元素从起点开始排列 */  
}	
.avatar {  
    width: 90rpx;             /* 设置图片宽度 */  
    height: 90rpx;           /* 设置图片高度 */  
    border-radius: 50%;     /* 设置为圆形 */
	margin-top: 60rpx;
} 
.container {  
  display: flex;  
  flex-direction: column;  
  padding: 20px;  
}
.page {  
	display: flex;  
	flex-direction: column;  
	height: 100%; /* 设置页面高度为视口高度 */  
	padding: 10px; /* 可选的内边距 */  
	box-sizing: border-box; /* 防止内边距影响实际布局大小 */  
}  
  
.content-wrapper {  
	display: flex; /* 使用Flexbox布局 */  
	justify-content: space-between; /* 内容在主轴上分布 */  
	align-items: flex-start; /* 内容在交叉轴上对齐 */  
	flex-wrap: wrap; /* 如果需要，内容可以换行 */ 
}  
  
.left-content,  
.right-content {  
	flex: 1; /* 左侧和右侧容器都占用相等的空间，除非设置了具体宽度 */  
	margin-bottom: 10px; /* 可选的下边距 */	
}  
  
.content-item {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start; 
  background-color: #fff; /* 可选的背景色 */  
  border-radius: 5px; /* 可选的圆角 */  
  overflow: hidden; /* 防止内容溢出 */
  border: 1px ; 	
  margin-top: 3rpx;
  margin-bottom: 3rpx;
  
}   

.title {  
  margin: 0;  
  padding: 10px;  
  font-size: 20px;  
  font-weight: bold;  
}  

.快手-row {  
  display: flex;  
  justify-content: space-between; /* 左右对齐 */  
}  

.middle-section {  
  display: flex;  
  justify-content: space-between; /* 三个标签左右对齐 */  
}  
.label {  
  flex: 1; /* 使三个标签等宽 */  
  margin-right: 10px; /* 右侧留出空间 */
  margin-left: 20px;
  font-size: 40rpx;
}  
 
/* 
.search-input {  
  width: 100%;  
  padding: 5px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
}  */

.content-area {  
  flex: 1; /* 使内容区域占据可用空间 */  
}  

.left-content, .right-content {  
  width: 50%; /* 使左右内容区域等宽 */  
}  

.item {  
  display: flex;  
  align-items: center; /* 使内容垂直居中 */  
  margin-bottom: 10px; /* 底部间隔 */  
} 
.item-image {  
  width: 80px;  
  height: 80px;  
  border-radius: 50%;  
}  
.item-title {  
  margin-right: 10px;  
  font-size: 16px;  
}  
.item-description {  
  font-size: 14px;  
}  

.publish-button {  
  position: fixed;  
  bottom: 20px;  
  right: 20px;  
  padding: 10px;  
  background-color: #4CAF50; /* 绿色 */  
  color: white;  
  border: none;  
  border-radius: 5px;  
}
</style>